<template>
  <basicModal ref="basicModalRef" @register="register" style="width: 850px" @on-ok="onOk">
    <n-spin :show="loading">
      <n-form
        :label-width="150"
        :model="formItem"
        :rules="rules"
        label-placement="left"
        ref="formRef"
        class="mt-6"
      >
        <n-grid x-gap="12" :cols="2">
          <n-gi>
            <n-form-item label="客户名称" path="name">
              <n-input
                v-model:value="formItem.name"
                style="width: 360px"
                placeholder="请输入客户名称"
              />
            </n-form-item>
          </n-gi>
					<n-gi>
					  <n-form-item label="手机号" path="phone">
					    <n-input
					      v-model:value="formItem.phone"
					      style="width: 360px"
					      placeholder="请输入手机号"
					    />
					  </n-form-item>
					</n-gi>
          <n-gi>
            <n-form-item label="窗口标题" path="title">
              <n-input
                v-model:value="formItem.title"
                style="width: 360px"
                placeholder="请输入窗口标题"
              />
            </n-form-item>
          </n-gi>
          
          <n-gi>
            <n-form-item label="网站域名" path="domin">
              <n-input
							  :disabled="openType == 'edit' ? true :false"
                v-model:value="formItem.domin"
                style="width: 360px"
                placeholder="请输入网站域名"
              />
            </n-form-item>
          </n-gi>
					<n-gi>
					  <n-form-item label="直播软件下载地址" path="liveurl">
					    <n-input
					      v-model:value="formItem.liveurl"
					      style="width: 360px"
					      placeholder="请输入直播软件下载地址"
					    />
					  </n-form-item>
					</n-gi>
					<n-gi>
					  <n-form-item label="教程中心下载地址" path="tutorialurl">
					    <n-input
					      v-model:value="formItem.tutorialurl"
					      style="width: 360px"
					      placeholder="请输入教程中心下载地址"
					    />
					  </n-form-item>
					</n-gi>
					<n-gi>
					  <n-form-item label="网站备案号" path="">
					    <n-input
					      v-model:value="formItem.config.recoednumber"
					      style="width: 360px"
					      placeholder="请输入网站备案号"
					    />
					  </n-form-item>
					</n-gi>
					<n-gi>
					  <n-form-item label="状态" path="status">
					    <n-switch checked-value="t" unchecked-value="f" v-model:value="formItem.status" />
					  </n-form-item>
					</n-gi>
        </n-grid>
        <n-form-item label="窗口icon" path="">
          <BasicUpload
            accept=".jpg,.png,.jpeg"
            v-model:value="formItem.iconUrls"
            @on-change="onChangeSuccess1"
          />
        </n-form-item>
        <n-form-item label="网站背景" path="">
          <BasicUpload
            accept=".jpg,.png,.jpeg"
            v-model:value="formItem.webUrls"
            @on-change="onChangeSuccess2"
          ></BasicUpload>
        </n-form-item>
      </n-form>
    </n-spin>
  </basicModal>
</template>

<script setup lang="ts">
import { basicModal, useModal } from '@/components/Modal';
import { BasicUpload } from '@/components/Upload';
import { ref } from 'vue';
import { useMessage } from 'naive-ui';
import { configAdd } from '@/api/website/index';
import { cloneDeep } from 'lodash-es';
import dayjs from 'dayjs';

const message = useMessage();
const basicModalRef = ref(null);
const formRef = ref(null);
const openType = ref('');
const title = ref('');
const loading = ref(false);
const defaultFormItem = {
  name:'',
	domin: '',
	phone: '',
	iconUrls: [],
	webUrls: [],
	status: 't',
	title: '',
	liveurl: '',
	tutorialurl: '',
	config: {
		title: '',
		liveurl: '',
		tutorialurl: '',
		recoednumber: '',
		icon: '',
		webbg: ''
	}
};
const formItem = ref({ ...defaultFormItem });
const rules = {
  name: {
    required: true,
    message: '请输入',
    trigger: 'blur',
  },
  domin: {
    required: true,
    message: '请输入',
    trigger: 'blur',
  },
  phone: {
    required: true,
    message: '请输入',
    trigger: 'blur',
  },
	title: {
		required: true,
		message: '请输入',
		trigger: 'blur',
	},
	liveurl: {
    required: true,
    message: '请输入',
    trigger: 'blur',
  },
	tutorialurl: {
    required: true,
    message: '请输入',
    trigger: 'blur',
  }
};
const [register, { openModal, closeModal, setSubLoading }] = useModal({
  title: title,
});

function open(data, type) {
  openModal();
  formItem.value = { ...defaultFormItem };
  openType.value = type;
  if (type === 'edit') {
    title.value = '编辑网站配置';
		console.log('data',data)
    formItem.value = data
		formItem.value.title = data.config.title
		formItem.value.liveurl = data.config.liveurl
		formItem.value.tutorialurl = data.config.tutorialurl
		if (formItem.value.config.icon) {
		  formItem.value.iconUrls = [
		    {
		      url: formItem.value.config.icon,
		    },
		  ];
		} else {
		  formItem.value.iconUrls = [];
		}
		if (formItem.value.config.webbg) {
		  formItem.value.webUrls = [
		    {
		      url: formItem.value.config.webbg,
		    },
		  ];
		} else {
		  formItem.value.webUrls = [];
		}
  } else {
    title.value = '新增网站配置';
  }
}

const emits = defineEmits(['update:list']);

const onChangeSuccess1 = (list) => {
  formItem.value.config.icon = list[0]?.url || '';
};

const onChangeSuccess2 = (list) => {
	formItem.value.config.webbg = list[0]?.url || '';
};

const onOk = () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      let params = cloneDeep(formItem.value);
			params.config.title = params.title
			params.config.liveurl = params.liveurl
			params.config.tutorialurl = params.tutorialurl
			delete params.iconUrls;
			delete params.webUrls;
      setSubLoading(true);
      if (openType.value === 'edit') {
        await configAdd(params).finally(() => {
          setSubLoading(false);
        });
        message.success('编辑成功');
      } else {
        await configAdd(params).finally(() => {
          setSubLoading(false);
        });
        message.success('新增成功');
      }
      closeModal();
      emits('update:list');
    } else {
      setSubLoading(false);
    }
  });
};

defineExpose({
  open,
});
</script>

<style scoped lang="less"></style>
